<template>
  <div class="dialog-container">
    <el-dialog
      :center="true"
      title="出库订单"
      :visible.sync="dialogVisible"
      width="70%"
      top="4%"
      :close-on-click-modal="false"
    >
      <!-- 第一行，信息 -->
      <el-card shadow="always">
        <el-form
          :inline="true"
          class="demo-form-inline"
          label-width="75px"
          size="small"
        >
          <el-form-item label="出库单号" style="margin-bottom: 0px">
            <el-input v-model="outputId" disabled />
          </el-form-item>
          <el-form-item label="销售单号" style="margin-bottom: 0px">
            <el-input v-model="id" disabled />
          </el-form-item>
          <el-form-item label="销售日期" style="margin-bottom: 0px">
            <el-input v-model="date" disabled />
          </el-form-item>
        </el-form>
      </el-card>

      <!-- 第二行，表格详情 -->
      <el-card shadow="always" style="margin-top: 5px">
        <el-table
          ref="multipleTable"
          size="small"
          :data="sorders"
          tooltip-effect="dark"
          style="width: 100%"
          height="200px"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            type="selection"
            width="55"
            align="center"
            :selectable="check"
          />
          <el-table-column prop="id" label="编号" width="130" align="center" />
          <el-table-column
            prop="goodsName"
            label="货物名称"
            width="150"
            align="center"
          />
          <el-table-column
            prop="brandName"
            label="品牌"
            width="130"
            align="center"
          />
          <el-table-column
            prop="warehouse"
            label="仓库"
            width="120"
            align="center"
          />
          <el-table-column
            prop="warehouseArea"
            label="分区"
            width="50"
            align="center"
          />
          <el-table-column
            prop="warehousePosition"
            label="库位"
            width="50"
            align="center"
          />
          <el-table-column
            label="状态"
            align="center"
          ><template slot-scope="{ row }">
            <el-tag
              effect="dark"
              :type="row.flags === 0 ? 'warning' : 'success'"
            >{{ row.flags === 0 ? "待出库" : "已出库" }}</el-tag>
          </template></el-table-column>
        </el-table>
      </el-card>

      <!-- 第三行，页脚插槽 -->
      <span slot="footer" class="dialog-footer">
        <el-button
          v-show="multipleSelection.length !== 0"
          size="small"
          type="primary"
          @click="open"
        >批量出库</el-button>
        <el-button size="small" @click="dialogVisible = false">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'Dialog',
  data() {
    return {
      // 弹窗显示与隐藏
      dialogVisible: false,
      // 内层弹窗
      innerVisible: false,
      // 出库单号
      outputId: '',
      // 订单编号
      id: '',
      // 订单日期
      date: '',
      // 订单信息
      sorders: [],
      // 表格中被选中的行
      multipleSelection: [],
      // 库信息
      warehouses: [],
      // 区信息
      areas: [],
      // 位信息
      positions: [],
      // 库
      myWarehouse: '',
      // 区
      myArea: '',
      // 位
      myPosition: ''
    }
  },
  methods: {
    // 切换选中状态
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 库
    async getA1List() {
      // 调用接口
      const response = await this.$API.goods.getWarehouse()
      if (response.code === 200) {
        this.warehouses = response.data
      } else {
        this.$message.error(response.msg)
      }
    },
    // 区
    async getA2List() {
      // 调用接口
      const response = await this.$API.goods.getArea(this.myWarehouse)
      // 保存数据
      if (response.code === 200) {
        this.areas = response.data
        // 清空数据
        this.positions = []
        this.myArea = ''
        this.myPosition = ''
      } else {
        this.$message.error(response.msg)
      }
    },
    // 位
    async getA3List() {
      // 调用接口
      const response = await this.$API.goods.getPosition(this.myArea)
      if (response.code === 200) {
        // 保存数据
        this.positions = response.data
        // 清空数据
        this.myPosition = ''
      } else {
        this.$message.error(response.msg)
      }
    },
    // 弹框确认
    open() {
      this.$confirm('是否确认将选中的货物出库?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.update()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '出库失败！'
        })
      })
    },
    // 显示内层弹窗
    add() {
      this.innerVisible = true
      this.$nextTick(async function() {
        // 默认仓库信息（修复显示区-位信息失败）
        const firstSelect = this.multipleSelection[0]
        this.myWarehouse = firstSelect.warehouseId
        this.myArea = firstSelect.warehouseAreaId
        this.myPosition = firstSelect.warehousePositionId

        // 获取仓库数据（不能通过调用函数获取，异步问题、下拉框kv匹配问题）
        const responseA1 = await this.$API.goods.getWarehouse()
        this.warehouses = responseA1.data
        const responseA2 = await this.$API.goods.getArea(this.myWarehouse)
        this.areas = responseA2.data
        const responseA3 = await this.$API.goods.getPosition(this.myArea)
        this.positions = responseA3.data
      })
    },
    // 检查改行是否可以被选中
    check(row, index) {
      return row.flags === 0
    },
    // 批量出库
    async update() {
      const response = await this.$API.output.add(this.outputId, this.$store.state.user.id, this.multipleSelection)
      if (response.code === 200) {
        this.$message.success(response.msg)
        // 关闭所有弹窗
        this.dialogVisible = false
        // 重新拉取数据
        this.$emit('get')
      } else {
        this.$message.error(response.msg)
      }
    }
  }
}
</script>
